<template><canvas ref="pieChart" width="400" height="400"></canvas></template>
<script>export default { props: { data: { type: Array, required: true } }, mounted() {this.drawPieChart();},
  methods: { drawPieChart() {const canvas = this.$refs.pieChart;
      const ctx = canvas.getContext('2d');const centerX = canvas.width / 2;const centerY = canvas.height / 2;
      const radius = Math.min(canvas.width, canvas.height) / 2 * 0.8;
      let total = this.data.reduce((sum, item) => sum + item.value, 0);
      let startAngle = 0;this.data.forEach(item => {const sliceAngle = (item.value / total) * 2 * Math.PI;
        ctx.beginPath();ctx.fillStyle = item.color;ctx.moveTo(centerX, centerY);
        ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle);ctx.fill();
        const midAngle = startAngle + sliceAngle / 2;const labelX = centerX + Math.cos(midAngle) * (radius + 20);
        const labelY = centerY + Math.sin(midAngle) * (radius + 20);ctx.fillStyle = '#000';ctx.textAlign = 'center';
        ctx.fillText(`${item.label} ${item.value} 间`, labelX, labelY);startAngle += sliceAngle;});} },
  watch: { data: { handler() {const ctx = this.$refs.pieChart.getContext('2d');
        ctx.clearRect(0, 0, this.$refs.pieChart.width, this.$refs.pieChart.height);this.drawPieChart();},
      deep: true } } }</script>
